<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>面板</title>
    <link rel="stylesheet" type="text/css" href="./iconfont/iconfont.css">
    <link rel="stylesheet" type="text/css" href="./css/dist/MateralUI.css">
    <link rel="stylesheet" type="text/css" href="./css/dist/panel.css">
</head>
<body style="padding: 20px;">
    <section class="m_panel m_panel_collapsible open">
        <div class="m_panel_title">可折叠面板(打开)</div>
        <div class="m_panel_body">
            面板内容
        </div>
    </section>
    <div style="margin-top: 50px;"></div>
    <section class="m_panel m_panel_collapsible">
        <div class="m_panel_title">可折叠面板(关闭)</div>
        <div class="m_panel_body">
            面板内容
        </div>
    </section>
    <div style="margin-top: 50px;"></div>
    <section class="m_panel">
        <div class="m_panel_title">普通面板</div>
        <div class="m_panel_body">
            面板内容
        </div>
    </section>
    <div style="margin-top: 50px;"></div>
    <section class="m_panel_group">
        <section class="m_panel m_panel_collapsible open">
            <div class="m_panel_title">可折叠面板(打开)</div>
            <div class="m_panel_body">
                面板内容
            </div>
        </section>
        <section class="m_panel">
            <div class="m_panel_title">普通面板</div>
            <div class="m_panel_body">
                面板内容
            </div>
        </section>
        <section class="m_panel m_panel_collapsible">            
            <div class="m_panel_title">可折叠面板(关闭)</div>
            <div class="m_panel_body">
                面板内容
            </div>
        </section>
    </section>
</body>
</html>